<template>
    <div>
        <h1>{{arr1}}</h1>
        <h1>{{arr2}}</h1>
        <button @click="changeRef">修改ref</button>
        <button @click="changeReactive">修改reactive</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "About",
});
</script>

<script setup lang="ts">
 /* 
    我们不能直接把reactive创建的代理对象替换了,否则当前的数据就没有响应式了
      - 使用ref创建响应式对象,因为替换ref的value,还是会变成响应式
      - 不要直接把我们要替换的数据作为reactive响应对象,而是在外层包裹一个对象,我们替换外边包裹的对象内属性的时候,依然所有的都有响应式
*/
import {ref , reactive} from "vue"

let arr1 = ref(["1" , "2" , "3"])
let arr2 = reactive({orter:["a" , "b" , "c"]})

const changeRef = () => {
    arr1.value = ["4" , "5" , "6"]
    
}
const changeReactive = () => {
    arr2.orter = ["4" , "5" , "6"]
}

</script>